import React, { PureComponent } from 'react'
import { Select } from 'antd'
import { history } from '@umijs/max'
import {
 InputSearch, ProTable, ProTableOperate, ProTableOptions,
} from '@/components'
import styles from './index.less'

const { Option } = Select
const { OperateItem } = ProTableOperate
export default class TaskManagement extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      query: {},
      columns: [
        {
          title: '表名称',
          dataIndex: 'tblName',
          width: '10%',
          key: 'tblName',
        },
        {
          title: '表描述',
          dataIndex: 'tblComment',
          width: '10%',
          key: 'tblComment',
        },
        {
          title: '任务频率',
          dataIndex: 'taskCycle',
          width: '20%',
          key: 'taskCycle',
          render: (status) => (
            [
              <>
                月
              </>,
              <>
                周
              </>,
              <>
                天
              </>,
              <>
                小时
              </>,
              <>
                分钟
              </>,
              <>
                试跑
              </>,
            ][status]
          ),
        },
        {
          title: '任务状态',
          dataIndex: 'status',
          width: '20%',
          key: 'status',
          render: (status) => (
            [
              <>
                运行中
              </>,
              <>
                正常
              </>,
              <>
                异常
              </>,
              <>
                sql语句出错
              </>,
            ][status]

          ),
        },
        {
          title: '规则数 ',
          dataIndex: 'ruleNum',
          width: '10%',
          key: 'ruleNum',
        },
        {
          title: '问题数',
          dataIndex: 'errorNum',
          width: '15%',
          key: 'errorNum',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '15%',
          key: 'operation',
          render: (text, record) => (
            <ProTableOptions>
              <span
                key="1"
                onClick={() => {
                  history.push(`/dataQuality/taskDetail?id=${record.id}`)
                }}
              >
                任务详情
              </span>
              <span
                key="2"
                onClick={() => {
                  history.push(`/dataQuality/ruleConfigSee?tableName=${record.tblName}&tblId=${record.tblId}&hasPartition=${record.hasPartition}`)
                }}
              >
                规则配置
              </span>
              <span
                key="3"
                onClick={() => {
                  history.push(`/dataQuality/taskResults?id=${record.id}`)
                }}
              >
                任务结果
              </span>
            </ProTableOptions>
          ),
        },
      ],
      cycle: [{
        name: '月',
        id: '0',
      }, {
        name: '周',
        id: '1',
      }, {
        name: '天',
        id: '2',
      }, {
        name: '小时',
        id: '3',
      }, {
        name: '分钟',
        id: '4',
      }],
      jobStatus: [{
        name: '运行中',
        id: '0',
      }, {
        name: '正常',
        id: '1',
      }, {
        name: '异常',
        id: '2',
      }, {
        name: 'sql语句出错',
        id: '3',
      }],
    }
  }

  render() {
    const {
      jobStatus,
      cycle,
      query,
      columns,
      cycleVal,
      status,
      tblName,
    } = this.state
    return (
      <div className={styles.page_content_with_breadcrumb}>
        <div className={styles.page_content}>
          <div className={styles.page_content_right}>
            <ProTableOperate
              toggleOperate={false} // 是否隐藏 收起/展开 按钮 (如果隐藏按钮，handleToggleSta设置属性值不生效)
              unfolded // 默认展开状态
            >
              <OperateItem align="left">
                任务频率
                <Select
                  allowClear
                  placeholder="请选择任务频率"
                  onChange={(data) => {
                    this.setState({
                      cycleVal: data,
                      query: {
                        cycle: data || '',
                        jobStatus: status || '',
                      },
                    })
                  }}
                >
                  {cycle && cycle.map((obj) => (
                    <Option
                      value={obj.id}
                      key={obj.id}
                    >
                      {obj.name}
                    </Option>
                  ))}
                </Select>
              </OperateItem>
              <OperateItem style={{ width: '2rem' }} align="left">
                任务状态
                <Select
                  allowClear
                  placeholder="请选择任务状态"
                  onChange={(data) => {
                    this.setState({
                      status: data,
                      query: {
                        cycle: cycleVal || '',
                        jobStatus: data || '',
                      },
                    })
                  }}
                >
                  {jobStatus && jobStatus.map((obj) => (
                    <Option
                      value={obj.id}
                      key={obj.id}
                    >
                      {obj.name}
                    </Option>
                  ))}
                </Select>
              </OperateItem>
              <OperateItem align="left">
                <InputSearch
                  placeholder="请输入数据表名称或描述进行搜索"
                  value={tblName}
                  onChange={(e) => {
                    this.setState({
                      tblName: e.target.value,
                    })
                  }}
                  onSearch={() => {
                    this.setState({
                      query: {
                        cycle: cycleVal || '',
                        tblName,
                        jobStatus: status || '',
                      },
                    })
                  }}
                />
              </OperateItem>
            </ProTableOperate>
            <ProTable
              query={query}
              rowKey="id"
              url="/api/v1/dataQuality/job/getJobs"
              columns={columns}
              loading={false}
            />
          </div>
        </div>
      </div>
    )
  }
}
